<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="page">
    <button data-path="/">首页</button>
    <button data-path="/news">新闻</button>
    <button data-path="/list">列表</button>
</div>
<div class="detail"></div>
<script>
    const router = [
        {path:'/',component:'首页',detail:'这是首页信息'},
        {path:'/news',component:'新闻',detail:'这是新闻信息'},
        {path:'/list',component:'列表',detail:'这是列表信息'}
    ];
    //h5提供了一个history.pushState的一个方法，可以在不刷新的情况下 改变浏览器地址
    const btns = document.querySelectorAll('.page button');
    const detail = document.querySelector('.detail');
    btns.forEach(btn=>{
        btn.addEventListener('click',function(){
            history.pushState(null,null,this.dataset.path)
            router.forEach(item=>{
                if(item.path===this.dataset.path){
                    detail.innerHTML = item.detail
                }
            })
        })
    })
    // 使用popstate事件可以监听历史记录的改变
    window.onpopstate = function (){
        const path = location.pathname
        console.log(path)
        router.forEach(item=>{
            if(item.path===path){
                detail.innerHTML = item.detail
            }
        })
    }
</script>
</body>
</html>